<template>
	<input v-model="val" placeholder="输入框" type="text" />
	<!-- <input :value="props.modelValue" placeholder="输入框" @input="(e) => emit('update:modelValue', e.target.value)" /> -->
	<input :value="name" placeholder="输入框" @input="(e) => emit('update:name', e.target.value)" />
	<input v-model="name" />
</template>

<script setup lang="ts">
const val = defineModel<string>()
const name = defineModel<string>('name', {
	default: '1'
})
interface Props {
	modelValue: string
}
// const props = withDefaults(defineProps<Props>(), {
// 	modelValue: '1'
// })
defineProps(['name'])
// props 接收 / emits 更改
// 现在一步到位
defineOptions({
	inheritAttrs: false,
	name: 'BaseInputName'
})

// const val = defineModel('val', {
// 	type: String,
// 	default: '1'
// })
// defineProps({
// 	modelValue: {
// 		type: String,
// 		default: '1'
// 	}
// })
interface Props {
	foo: string
	bar: number
}

// const props = withDefaults(defineProps<Props>(), {
// 	foo: '1',
// 	bar: 2
// })
const data = ref()
// defineProps<{
// 	foo: string
// 	bar: number
// }>()
// import { IProps } from './types'

// const emit = defineEmits(['change'])
const emit = defineEmits<{
	(e: 'change', value: string): void
}>()
// change: [value: string]

// const val = ref('1')
// const clickWork = () => {
// 	emit('change', val.value)
// }

// const emit = defineEmits(['update:modelValue'])

// const props = defineProps({
// 	modelValue: {
// 		type: String,
// 		default: '1'
// 	}
// })
// const val = ref(props.modelValue)
// const inputClick = (e: Event) => {
// 	emit('update:modelValue', (e.target as HTMLInputElement).value)
// }
// const val = defineModel<string>({
// 	default: '1'
// })

// }
// const model = defineModel<string>()
// const model = defineModel<string>({ type: String, default: '22' })

// 如果为 defineModel prop 设置了一个 default 值且父组件没有为该 prop 提供任何值，会导致父组件与子组件之间不同步。在下面的示例中，父组件的 myRef 是 undefined，而子组件的 model 是 1：

// const { name } = defineProps<IProps>()

// watchEffect(() => {
// 	console.log('%c [  ]-16', 'font-size:13px; background:pink; color:#bf2c9f;', name)
// })
</script>

<style lang="scss" scoped></style>
